<template>
  <div class="container">
    <el-card class="card" shadow="hover">
      <div ref="pvLine" style="width: 100%; height: 400px"></div>
    </el-card>
    <el-card class="card" shadow="hover">
      <div ref="uvLine" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script lang="js" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts/core';
import { GridComponent, TitleComponent, TooltipComponent, ToolboxComponent, MarkLineComponent, MarkPointComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { getPvDaily, getUvDaily } from '@/api';
import { useRouter } from 'vue-router';

echarts.use([GridComponent, LineChart, ToolboxComponent, CanvasRenderer, UniversalTransition, TitleComponent, TooltipComponent, MarkLineComponent, MarkPointComponent]);

const pvLine = ref(null);
const uvLine = ref(null);
const router = useRouter();

onMounted(async () => {
    // 获取PV数据
    const pvData = await getPvDaily(router);

    // 初始化 pv-line 图表
    if (pvData) {
        const pvLineChart = echarts.init(pvLine.value);
        const pvOption = {
            title: {
                text: '天级别PV趋势',
                left: 'center',
            },
            toolbox: {
                feature: {
                    dataView: { readOnly: true },
                    saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    let result = params[0].name + '<br/>';
                    params.forEach(item => {
                        result += item.marker + item.seriesName + ' : ' + item.value + ' 次<br/>';
                    });
                    return result;
                },
            },
            xAxis: {
                type: 'category',
                data: pvData.map(item => {
                    const date = new Date(item.date);
                    return `${date.getMonth() + 1}-${date.getDate()}`;
                })
            },
            yAxis: {
                type: 'value',
                name: 'PV数'
            },
            series: [
                {
                    name: 'PV',
                    data: pvData.map(item => item.pvCount),
                    type: 'line',
                    smooth: true,
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                }
            ]
        };

        pvOption && pvLineChart.setOption(pvOption);
    }

    // 获取UV数据
    const uvData = await getUvDaily(router);

    // 初始化 uv-line 图表
    if (uvData) {
        const uvLineChart = echarts.init(uvLine.value);
        const uvOption = {
            title: {
                text: '天级别UV趋势',
                left: 'center',
            },
            toolbox: {
                feature: {
                    dataView: { readOnly: true },
                    saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    let result = params[0].name + '<br/>';
                    params.forEach(item => {
                        result += item.marker + item.seriesName + ' : ' + item.value + ' 次<br/>';
                    });
                    return result;
                },
            },
            xAxis: {
                type: 'category',
                data: uvData.map(item => {
                    const date = new Date(item.date);
                    return `${date.getMonth() + 1}-${date.getDate()}`;
                })
            },
            yAxis: {
                type: 'value',
                name: 'UV数'
            },
            series: [
                {
                    name: 'UV',
                    data: uvData.map(item => item.uvCount),
                    type: 'line',
                    smooth: true,
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                }
            ]
        };

        uvOption && uvLineChart.setOption(uvOption);
    }
});
</script>

<style scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card {
  margin-bottom: 20px;
}

.card:last-child {
  margin-bottom: 0;
}
</style>
